{% extends 'layout/indexframe.html' %}

{% block title %}trigger{% endblock %}

{% block css %}
    <style>
        th {
            font-size: 20px;
            text-align: center;
        }

        td {
            font-size: 20px;
            text-align: center;
        }

        .showa {
            border: 1px solid #dddddd;
            padding: 20px 40px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 5000px;">

        <div style="margin-bottom: 10px;" class="clearfix">
            <div class="panel panel-default">

                <div class="panel-heading" style="font-size: 50px;text-align: center;background-color: #9ea6b9">
                    触发事件列表
                </div>
                <div class="col-lg-2" style="text-align: center;margin-top: 10px;margin-bottom: 10px;"><a
                        id="addtrigger" class="btn btn-primary btn-lg" href="#">
                    点击添加事件</a></div>
                <table class="table">
                    <thead>
                    <tr>
                        <th style="text-align: center;">任务名</th>
                        <th style="text-align: center;">来源Topic</th>
                        <th style="text-align: center;">监测来源数据</th>
                        <th style="text-align: center;">目的Topic</th>
                        <th style="text-align: center;">发送目的数据</th>
                        <th style="text-align: center;">最近触发时间</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in showobjs %}
                        <tr>
                            <td style="text-align: center;">{{ obj.triggername }}</td>
                            <td style="text-align: center;">{{ obj.triggercalling }}</td>
                            <td style="text-align: center;">{{ obj.triggerdata }}</td>
                            <td style="text-align: center;">{{ obj.triggercalled }}</td>
                            <td style="text-align: center;">{{ obj.pubdata }}</td>
                            <td style="text-align: center;">{{ obj.triggersavetime }}</td>

                            <td style="text-align: center;">
                                <a class="btn btn-default btn-xs checkbtn" style="font-size: 20px;"
                                   nid={{ obj.id }} href="#"}">查看</a>
                                <a class="btn btn-danger btn-xs delbtn" style="font-size: 20px;"
                                   nid={{ obj.id }} href="#"}">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>

    </div>


    {# 添加任务 #}
    <div class="modal fade" id="addshow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>触发事件</strong>
                    </h1>
                </div>
                <div class="modal-body">
                    <div class="clearfix">
                        <div style="margin-left: 100px;">
                            <form id="addform">
                                <div class="form-group">
                                    <h3>任务名</h3>
                                    <input name="triggername">

                                    <h3>来源Topic</h3>
                                    <select name="triggercalling">
                                        <option>未选择</option>
                                        {% for sub in triggercalling %}
                                            <option>{{ sub.devtopic }}</option>
                                        {% endfor %}
                                    </select>

                                    <h3>监测数据</h3>
                                    <div><textarea name="triggerdata" style="height: 50px;"></textarea></div>

                                    <h3>目的Topic</h3>
                                    <select name="triggercalled">
                                        <option>未选择</option>
                                        {% for pub in triggercalled %}
                                            <option>{{ pub.devtopic }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <h3>发布内容</h3>
                                    <div><textarea name="pubdata" style="height: 50px;"></textarea></div>
                                    <span id="sendmes" style="color: red;"></span>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input id="addtriggerbtn" type="button" class="btn btn-primary" value="保存">
                </div>
            </div>
        </div>
    </div>



    {# 查看触发事件 #}
    <div class="modal fade" id="checkshow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div style="text-align: center;"><h1 id="triggertitle"><strong>历史触发</strong></h1></div>
                </div>
                <div class="modal-body">
                    <div class="clearfix showa" style="font-size: 25px">
                        <div class="col-md-8" id="checkdatashow">
                            <div>Null</div>
                        </div>
                        <div class="col-md-4 testa" id="checkdatashowact">

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#trigger').addClass('active')
        });
    </script>
    <script>

        $(function () {
            bindaddtrigger();
            savetrigger();
            binddelbtn();
            bindcheckbtn();
            binddelcheck();
        })

        function bindaddtrigger() {
            $("#addtrigger").click(function () {
                $("#addshow").modal("show");
            })
        }


        function savetrigger() {
            $('#addtriggerbtn').click(function () {
                $.ajax({
                    url: "/web/triggersave/",
                    type: "POST",
                    data: $("#addform").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("制定成功")
                            location.href = '/web/trigger/'
                        } else {
                            if (res.error) {
                                $('#sendmes').text(res.error)
                            } else {
                                $('#sendmes').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes').text("")
                            }
                        }, 1000)
                    }
                })
            })
        }

        function bindcheckbtn() {
            $(".checkbtn").click(function () {
                var nid = $(this).attr('nid')
                $.ajax({
                    url: "/web/triggercheck/",
                    type: "GET",
                    data: {'nid': nid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            document.getElementById("triggertitle").setAttribute('nid', nid);
                            document.getElementById("checkdatashow").innerHTML = res.list;
                            document.getElementById("checkdatashowact").innerHTML = res.listact;
                            $("#checkshow").modal("show");
                        } else {
                            alert("error check")
                        }
                    }
                })
            })
        }

        function binddelbtn() {
            $(".delbtn").click(function () {
                nid = $(this).attr('nid');
                $.ajax({
                    url: "/web/triggerdel/",
                    type: "GET",
                    data: {'nid': nid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.reload();
                        } else {
                            alert("error del")
                        }
                    }
                })
            })
        }

        function binddelcheck() {
            $("#checkdatashowact").on("click", ".btndell", function () {
                var id = $(this).attr("id");
                var nid = $('#triggertitle').attr('nid')
                $.ajax({
                    url: "/web/triggercheck/del/",
                    type: "GET",
                    data: {"id": id},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $.ajax({
                                url: "/web/triggercheck/",
                                type: "GET",
                                data: {"nid": nid},
                                dataType: "JSON",
                                success: function (res) {
                                    if (res.status) {
                                        document.getElementById("triggertitle").setAttribute('nid', nid);
                                        document.getElementById("checkdatashow").innerHTML = res.list;
                                        document.getElementById("checkdatashowact").innerHTML = res.listact;
                                    }else{
                                        alert("del error")
                                    }
                                }
                            })
                        }
                    }
                })
            })
        }
    </script>





{% endblock %}